<template>
    <TabBar>
        <TabItem
            v-for="(item, index) in tabItems"
            :key="index"
            :icon="item.icon"
            :label="item.label"
            :class="{ active: item.isActive }"
            @blueColor="handleClick(index)"
        ></TabItem>
        <!-- <TabItem icon="icon-home" label="首页"></TabItem>
        <TabItem icon="icon-search"></TabItem>
        <TabItem icon="icon-lianxiren"></TabItem>
        <TabItem icon="icon-shezhi"></TabItem> -->
    </TabBar>
</template>
<script setup>
import TabBar from "./components/TabBar.vue";
import TabItem from "./components/TabItem.vue";
import { ref } from "vue";

const tabItems = ref([
    { icon: "icon-home", label: "首页", isActive: true },
    { icon: "icon-search", label: "搜索", isActive: false },
    { icon: "icon-lianxiren", label: "联系", isActive: false },
    { icon: "icon-shezhi", label: "设置", isActive: false },
]);
function handleClick(index) {
    tabItems.value.forEach((item) => {
        item.isActive = false;
    });
    tabItems.value[index].isActive = !tabItems.value[index].isActive;
}
</script>
<style scoped>
body {
    background: rgb(188, 185, 185);
}
</style>
